<template>
    <el-menu background-color="#545c64"
             text-color="#fff"
             active-text-color="#409eff"
             :collapse="collapse"
             :collapse-transition="false"
             unique-opened
             :router="true"
             :default-active="actionPath">
      <!--        一级菜单-->
      <el-submenu :index="item.path" v-for="item in menuList" :key="item.id">
        <template slot="title">
          <i class="iconfont" :class="item.icon"></i>
          <span>{{item.title}}</span>
        </template>
<!--        二级菜单-->
        <el-menu-item :index="it.path" v-for="it in item.sList" :key="it.id" @click="savePath(it.path)">
          <template slot="title">
            <i class="iconfont" :class="it.icon"></i>
            <span>{{it.title}}</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>
</template>

<script>
  export default {
    name: "aSide",
    data(){
      return{
        //菜单列表
        menuList: [],
        actionPath: '/welcome',//默认路径
      }
    },
    created() {
      //查询menuList
      this.getMenuList();
      this.actionPath = window.sessionStorage.getItem('actionPath') //获取session中actionPath 动态修改actionPath
    },
    methods: {
      //获取导航菜单
      async getMenuList(){
        const {data:res} = await this.$http.get("menus")
        // console.log(res);
        if (res.flag != 200){
          return this.$message.error("获取列表失败!!!");
        }
        this.menuList =res.menus;  //数据回填
        // console.log(this.menuList)
      },
      savePath(actionPath){
        window.sessionStorage.setItem('actionPath',actionPath)  //路径存放
        this.actionPath = actionPath;
      }
    },
    computed:{
      collapse(){
        return this.$store.state.collapse;
      }
    }
  }
</script>

<style scoped>
.el-menu{
  border-right: none;
}
</style>
